<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th colspan="2">基本信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>登录用户</td>
                    <td>{{ data?.username }}</td>
                </tr>
                <tr>
                    <td>登录时间</td>
                    <td>{{ data?.createTime }}</td>
                </tr>
                <tr>
                    <td>登录状态</td>
                    <td>{{ data?.loginStateName }}</td>
                </tr>
            </tbody>
        </table>
        <table class="mt-24px">
            <thead>
                <tr>
                    <th colspan="2">地址信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>异地登录</td>
                    <td>{{ data?.isRemoteLogin ? '是' : '否' }}</td>
                </tr>
                <tr>
                    <td>登录IP</td>
                    <td>{{ data?.loginIp }}</td>
                </tr>
                <tr>
                    <td>登录地址</td>
                    <td>{{ data?.loginAddress }}</td>
                </tr>
                <tr>
                    <td>登录国家</td>
                    <td>{{ data?.loginCountry }}</td>
                </tr>
                <tr>
                    <td>登录省份</td>
                    <td>{{ data?.loginProvince }}</td>
                </tr>
                <tr>
                    <td>登录城市</td>
                    <td>{{ data?.loginCity }}</td>
                </tr>
            </tbody>
        </table>
        <table class="mt-24px">
            <thead>
                <tr>
                    <th colspan="2">终端信息</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>终端类型</td>
                    <td>{{ data?.isMobile ? '移动端' : 'PC端' }}</td>
                </tr>
                <tr>
                    <td>操作系统</td>
                    <td>{{ data?.osName }}</td>
                </tr>
                <tr>
                    <td>系统架构</td>
                    <td>{{ data?.osPlatformName }}</td>
                </tr>
                <tr>
                    <td>浏览器</td>
                    <td>{{ data?.browserName }}</td>
                </tr>
                <tr>
                    <td>浏览器引擎</td>
                    <td>{{ data?.browserEngineName }}{{ data?.browserEngineVersion }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { JBoltApi } from '@/utils/request'
import { type ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
    }>(),
    {
        id: ''
    }
)
const data = ref<any>(null)
onMounted(async () => {
    if (props.id) {
        const { error, result } = await JBoltApi.get<ResData>(
            `/api/admin/loginLog/${props.id}`
        )
        if (error) return
        data.value = result.data
    }
})
</script>

<style scoped>
table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid #e8eaec;
    padding: 8px;
    text-align: center;
}
tr td:first-child {
    font-weight: bold;
    width: 150px;
    text-align: right;
}
tr td:last-child {
    text-align: left;
}

tr:hover {
    background-color: lightgray;
}
</style>
